import { Menu, MenuProps } from "antd";
import { FC, useState } from "react";
import { useNavigate } from "react-router-dom";

type MenuItem = Required<MenuProps>["items"][number];

const items: MenuItem[] = [
  {
    label: "题海",
    key: "tihai",
  },
  {
    label: "提交题目",
    key: "submit",
    children: [
      {
        key: "submitChoice",
        label: "选择题",
      },
      {
        key: "submitBlank",
        label: "填空题",
      },
      {
        key: "submitSolution",
        label: "解答题"
      }
    ],
  },
  {
    label: "提交标签",
    key: "submitMark",
  },
  {
    label: "个人中心",
    key: "user",
  }
];

const TihaiMenu: FC = () => {
  const [current, setCurrent] = useState("tihai");
  const navigate = useNavigate();

  const onClick: MenuProps["onClick"] = (e) => {
    var id = e.key;
    setCurrent(id);
    navigate("/"+id);
  };

  return (
    <Menu
      onClick={onClick}
      selectedKeys={[current]}
      defaultSelectedKeys={["tihai"]}
      mode="horizontal"
      items={items}
    />
  );
};

export default TihaiMenu;